.arrangeableList{
    $filterHeight: 40px;
    .filter{
        position: absolute;
        inset: 0px;
        bottom: unset;
        height: $filterHeight;
        z-index: 10;
        background-color: white;
        box-shadow: 0px 0px 5px 0px black;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
        gap: 10px;
        select{
            margin: 0px;
        }
    }
    .lines{
        position: absolute;
        inset: 0px;
        top: $filterHeight;
        background-color: #ddd;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        padding-top: 16px;
        justify-content: flex-start;
        align-items: stretch;
        overflow-y: scroll;
    }
    .lines.arranging{
        cursor: ns-resize;
    }
    .lines>div{
        flex-grow: 0;
        flex-shrink: 0;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 3px;
        background-color: white;
        padding: 5px;
        border-radius: 8px;
    }
    .lines>div.arranging{
        box-shadow: 0px 0px 5px 2px black;
        background-color: #ddd;
    }
    .newLine{
        font-size: 20px;
        cursor: pointer;
        color: #999;
        &:hover{
            color: black
        }
    }
    input{
        margin: 0px;
        padding: 0px;
    }
    input[type=color]{
        width: 0px;
        height: 0px;
        border-width: 0px;
        flex-shrink: 0;
    }
    label{
        cursor: pointer;
    }
    .names{
        display: flex;
        flex-direction: column;
        gap: 3px;
        input{
            font-size: 14px;
            width: 100px;
            border: none;
        }
        input:first-child{
            font-size: 18px;
        }
    }
    .moveBtn{
        cursor: ns-resize;
    }
}